/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./workgz/my-react-app/**/*.{js,ts,jsx,tsx,html}",
    "./workgz/my-react-app-e2e/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 定义颜色系统，使用 CSS 变量实现主题切换
      colors: {
        // 主题色 (Primary Color)
        primary: {
          DEFAULT: "rgb(var(--color-primary-500) / <alpha-value>)", // 默认值指向 500 强度
          50: "rgb(var(--color-primary-50) / <alpha-value>)",
          100: "rgb(var(--color-primary-100) / <alpha-value>)",
          200: "rgb(var(--color-primary-200) / <alpha-value>)",
          300: "rgb(var(--color-primary-300) / <alpha-value>)",
          400: "rgb(var(--color-primary-400) / <alpha-value>)",
          500: "rgb(var(--color-primary-500) / <alpha-value>)",
          600: "rgb(var(--color-primary-600) / <alpha-value>)",
          700: "rgb(var(--color-primary-700) / <alpha-value>)",
          800: "rgb(var(--color-primary-800) / <alpha-value>)",
          900: "rgb(var(--color-primary-900) / <alpha-value>)",
          950: "rgb(var(--color-primary-950) / <alpha-value>)",
        },
        // 辅助色 (Secondary Color) - 可根据需要定义
        secondary: {
          DEFAULT: "rgb(var(--color-secondary-500) / <alpha-value>)",
          50: "rgb(var(--color-secondary-50) / <alpha-value>)",
          100: "rgb(var(--color-secondary-100) / <alpha-value>)",
          200: "rgb(var(--color-secondary-200) / <alpha-value>)",
          300: "rgb(var(--color-secondary-300) / <alpha-value>)",
          400: "rgb(var(--color-secondary-400) / <alpha-value>)",
          500: "rgb(var(--color-secondary-500) / <alpha-value>)",
          600: "rgb(var(--color-secondary-600) / <alpha-value>)",
          700: "rgb(var(--color-secondary-700) / <alpha-value>)",
          800: "rgb(var(--color-secondary-800) / <alpha-value>)",
          900: "rgb(var(--color-secondary-900) / <alpha-value>)",
          950: "rgb(var(--color-secondary-950) / <alpha-value>)",
        },
        // 灰度色 (Gray Scale) - 同样使用 CSS 变量，方便暗黑模式切换
        gray: {
          DEFAULT: "rgb(var(--color-gray-500) / <alpha-value>)",
          50: "rgb(var(--color-gray-50) / <alpha-value>)",
          100: "rgb(var(--color-gray-100) / <alpha-value>)",
          200: "rgb(var(--color-gray-200) / <alpha-value>)",
          300: "rgb(var(--color-gray-300) / <alpha-value>)",
          400: "rgb(var(--color-gray-400) / <alpha-value>)",
          500: "rgb(var(--color-gray-500) / <alpha-value>)",
          600: "rgb(var(--color-gray-600) / <alpha-value>)",
          700: "rgb(var(--color-gray-700) / <alpha-value>)",
          800: "rgb(var(--color-gray-800) / <alpha-value>)",
          900: "rgb(var(--color-gray-900) / <alpha-value>)",
          950: "rgb(var(--color-gray-950) / <alpha-value>)",
        },
        // 语义化颜色 (Semantic Colors)
        success: {
          DEFAULT: "rgb(var(--color-success-DEFAULT) / <alpha-value>)",
          light: "rgb(var(--color-success-light) / <alpha-value>)",
          dark: "rgb(var(--color-success-dark) / <alpha-value>)",
        },
        warning: {
          DEFAULT: "rgb(var(--color-warning-DEFAULT) / <alpha-value>)",
          light: "rgb(var(--color-warning-light) / <alpha-value>)",
          dark: "rgb(var(--color-warning-dark) / <alpha-value>)",
        },
        error: {
          DEFAULT: "rgb(var(--color-error-DEFAULT) / <alpha-value>)",
          light: "rgb(var(--color-error-light) / <alpha-value>)",
          dark: "rgb(var(--color-error-dark) / <alpha-value>)",
        },
        info: {
          DEFAULT: "rgb(var(--color-info-DEFAULT) / <alpha-value>)",
          light: "rgb(var(--color-info-light) / <alpha-value>)",
          dark: "rgb(var(--color-info-dark) / <alpha-value>)",
        },
      },
      // 字体家族
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"], // 示例字体，可根据企业需求调整
      },
      // 动画
      animation: {
        "spin-slow": "spin 3s linear infinite",
        "fade-in": "fadeIn 0.3s ease-out",
        "slide-up": "slideUp 0.3s ease-out",
        "slide-down": "slideDown 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
        slideUp: {
          "0%": { transform: "translateY(10px)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
        slideDown: {
          "0%": { transform: "translateY(-10px)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
      },
    },

    plugins: [],
  },
}
